<template>
	<el-drawer :size="language == 'zh'?'40%':'50%'" v-model="quickViewVisible" append-to-body>
		<template #header>{{ quickViewData?.sku }}</template>
		<div class="quick_view_container">
			<div class="quick_view_header">
				<img :src="quickViewData.image+'_300x300.jpg' || GoodImage" class="quick_view_header_img" alt="" />

			</div>
			<div class="qick_view_body" style="width: 100%;">
				<el-tabs v-model="activeName" class="demo-tabs" style="width: 100%;">
					<el-tab-pane :label="msg.tabTileBase" name="first">
						<el-scrollbar height="100%">
							<div class="item_desc" v-for="(item,index) in getPropData?.basic" :key="index">
								<div class="item_desc_label">{{item.title}}：</div>
								<div class="item_desc_value">{{item.value==""?'-':item.value}}</div>
							</div>
						</el-scrollbar>
					</el-tab-pane>
					<el-tab-pane :label="msg.tabTileSaleProps" name="second">
						<el-scrollbar height="100%">
							<div class="item_desc" v-for="item in getPropData?.prop" :key="item">
								<div class="item_desc_label">{{item.title}}：</div>
								<div class="item_desc_value">{{item.value?item.value:'-'}}</div>
							</div>
						</el-scrollbar>
					</el-tab-pane>
					<el-tab-pane :label="msg.tabTileCustomsClearanceProps" name="third">
						<el-scrollbar height="100%">
							<div class="item_desc" v-for="item in getPropData?.cc_prop" :key="item">
								<div class="item_desc_label">{{item.title}}：</div>
								<div class="item_desc_value">{{item.value?item.value:'-'}}</div>
							</div>
						</el-scrollbar>
					</el-tab-pane>
					<el-tab-pane :label="msg.tabTileGoodsBarCode" name="fourth" style="width: 100%;">
						<el-scrollbar height="100%" style="width: 100%;">
							<el-table class="merak-table-container" width="100%"
								v-if="getCodeData?.list && getCodeData?.list.length>0" :data="getCodeData.list"
								scrollbar-always-on>
								<el-table-column :width="flexColumnWidth(item.field,item.title,getCodeData.list,getCodeData.header)"
									v-for="(item,index) in getCodeData.header" :prop="item.field" :label="item.title" />
							</el-table>
						</el-scrollbar>
					</el-tab-pane>
					<el-tab-pane :label="msg.tabTilePaking" name="Five" style="width: 100%;"
						v-if="getPakingData?.list && getPakingData?.list.length>0">
						<el-scrollbar height="100%" style="width: 100%;">
							<el-table class="merak-table-container" width="100%" :data="getPakingData.list"
								scrollbar-always-on>
								<el-table-column :width="flexColumnWidth(item.field,item.title,getPakingData.list,getPakingData.header)"
									v-for="(item,index) in getPakingData.header" :prop="item.field"
									:label="item.title" />
							</el-table>
						</el-scrollbar>

					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</el-drawer>
</template>

<script setup lang="ts" named="goodList_quickView">
	import { ref, reactive, onMounted, onUnmounted, watch, nextTick, inject } from "vue";
	import { getCode, getPakingTable, getAttribute } from "@/api/modules/goodsArchive/list/information";
	import GoodImage from "@/assets/images/goods_img.webp";
	import {
		useGlobalStore
	} from "@/stores/modules/global";
	const {
		language
	} = useGlobalStore();
	const activeName = ref("first");
	const quickViewVisible = inject("quickViewVisible");
	const quickViewData = inject("quickViewData");
	const msg = inject("quickViewMsg");
	const quickViewHead = inject("quickViewHead");
	const getCodeData = ref({});
	const getPakingData = ref({});
	const getPropData = ref({});


	// 自适应表格列宽
	// 自适应表格列宽
	const flexColumnWidth = (str,title ,tableData,tableHeader, flag = 'max') => {
		// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
		// flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
		// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
		str = str + '';
		let columnContent = '';
		if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
			return
		}
		if (!str || !str.length || str.length === 0 || str === undefined) {
			return
		}
		if (flag === 'equal') {
			// 获取该列中第一个不为空的数据(内容)
			for (let i = 0; i < tableData.length; i++) {
				if (tableData[i][str].length > 0) {
					// console.log('该列数据[0]:', tableData[0][str])
					columnContent = tableData[i][str]
					break
				}
			}
		} else {
			// 获取该列中最长的数据(内容)
			let index = 0
			for (let i = 0; i < tableData.length; i++) {
				if (tableData[i][str] === null) {
					return
				}
				const now_temp = tableData[i][str] + ''
				const max_temp = tableData[index][str] + ''
				if (now_temp.length > max_temp.length) {
					index = i
				}
			}
			columnContent = tableData[index][str]
		}

		// 以下分配的单位长度可根据实际需求进行调整
		let flexWidth = 0;
		let flexHeaderWidth = 0;
		for (const char of title) {
			if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
				// 如果是英文字符，为字符分配8个单位宽度
				flexHeaderWidth += 10
			} else if (char >= '\u4e00' && char <= '\u9fa5') {
				// 如果是中文字符，为字符分配18个单位宽度
				flexHeaderWidth += 20
			} else if(/^\d+$/.test(char)){
				// 其他种类字符，为字符分配8个单位宽度
				flexHeaderWidth += 10
			} else {
				flexHeaderWidth += 10
			}
		}
		if(columnContent.length > 0){
			for (const char of columnContent) {
				if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
					// 如果是英文字符，为字符分配8个单位宽度
					flexWidth += 10
				} else if (char >= '\u4e00' && char <= '\u9fa5') {
					// 如果是中文字符，为字符分配18个单位宽度
					flexWidth += 20
				} else if(/^\d+$/.test(char)){
					// 其他种类字符，为字符分配8个单位宽度
					flexWidth += 10
				} else {
					flexWidth += 10
				}
			}
		}
		
		
		if (flexWidth < 80) {
			// 设置最小宽度
			flexWidth = 80
		}
		if (flexHeaderWidth < 80) {
			// 设置最小宽度
			flexHeaderWidth = 80
		}
		if(flexHeaderWidth > flexWidth){
			return flexHeaderWidth + 'px'
		} else {
			return flexWidth + 'px'
		}
	}
	const getMsgCode = () => {
		let dataMsg = {
			product_id: quickViewData.value.product_id
		}
		getCode(dataMsg).then(({ code, data }) => {
			if (code == ResultEnum.SUCCESS) {
				getCodeData.value = data.table_data
			}
		});
	};
	const getPakingMsg = () => {
		let dataMsg = {
			product_id: quickViewData.value.product_id
		}
		getPakingTable(dataMsg).then(({ code, data }) => {
			if (code == ResultEnum.SUCCESS) {
				getPakingData.value = data
			}
		});
	};

	const getAttributeList = () => {
		let dataMsg = {
			product_id: quickViewData.value.product_id,
			type_id: quickViewData.value.type_id,
		}
		getAttribute(dataMsg).then(({ code, data }) => {
			if (code == ResultEnum.SUCCESS) {
				getPropData.value = data
			}
		});
	};
	watch(quickViewData, () => {
		getAttributeList()
		getMsgCode()
		getPakingMsg()
	});
</script>

<style scoped lang="scss">
	.quick_view_header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200px;
		width: 100%;
		padding: 0px 0px 20px;
	}

	.quick_view_header_img {
		max-height: 100%;
		max-width: 100%;
	}

	// :deep(.el-drawer__body){
	//   display: flex;
	// }
	:deep(.el-tabs__content) {
		padding: 15px 0px;
	}
	:deep(.el-table--default .cell) {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}
	
	.quick_view_container {
		display: flex;
		flex-direction: column;
		height: 100%;

		.qick_view_body {
			flex: 1;
			overflow: hidden;
		}
	}

	.item_desc {
		
		width: 50%;
		float: left;
		margin-bottom: 25px;
		.item_desc_label {
			flex-shrink: 0;
			flex-grow: 0;
			flex-basis: 30%;
			font-size: 12px;
			text-align: left;
			margin-bottom: 5px;
			color: var(--placeholder-color);
		}

		.item_desc_value {
			flex: 1;
			font-size: 13px;
			color: var(--font-color-option);
			word-break: break-all;
			font-weight: 600;
			line-height: 20px;
		}
	}

	.qick_view_body {
		display: flex;
	}

	:deep(.el-tabs) {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	:deep(.el-tab-pane) {
		display: flex;
		flex: 1;
	}

	:deep(.el-tabs__item) {
		font-weight: 400;
	}

	:deep(.el-tabs__content) {
		overflow: hidden;
		display: flex;
		flex: 1;
	}

	.el-tabs__content {
		display: flex;
		flex: 1;

		.el-scrollbar {
			flex: 1;
			margin: 0px;
			padding: 0px;
		}
	}
</style>